<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        a.active {
            color: red;
            border-bottom: 1px solid red;
        }
        
        #content>div {
            display: none;
        }
        
        #content>div:first-child {
            display: block;
        }
    </style>
</head>

<body>
    <div id="menu">
        <a href="#" class="active">公司新闻</a>
        <a href="#">行业动态</a>
        <a href="#">展会新闻</a>
    </div>
    <div id="content">
        <div>公司新闻内容</div>
        <div>行业动态内容</div>
        <div>展会新闻内容</div>
    </div>
    <script>
        // .children获得其子类 相当于css  #menu>a       获取一个dom所有子元素的集合（遍历一层）
        // children只返回元素节点
        // childNodes属性返回所有节点，包括文本节点，注释节点
        // 返回值HTMLCollection对象，表示一元素节点的集合，元素在集合中的顺序是在源码中的顺序
        var menu = document.getElementById("menu").children;
        console.log(menu);
        var content = document.getElementById("content").children;
        for (let i = 0; i < menu.length; i++) {
            // 给每个a增加一个鼠标移入的事件
            menu[i].onmouseenter = function() {
                // 清除a样式  内容设置为隐藏
                for (let index = 0; index < menu.length; index++) {
                    menu[index].className = '';
                    content[index].style.display = "none";
                }
                // 鼠标移入 当前的a添加active样式
                this.className = "active";
                content[i].style.display = "block"; //显示内容
            }

        }
    </script>

</body>

</html>